<template lang="html">
  <div>
    <sui-segment color="red" inverted>Red</sui-segment>
    <sui-segment color="orange" inverted>Orange</sui-segment>
    <sui-segment color="yellow" inverted>Yellow</sui-segment>
    <sui-segment color="olive" inverted>Olive</sui-segment>
    <sui-segment color="green" inverted>Green</sui-segment>
    <sui-segment color="teal" inverted>Teal</sui-segment>
    <sui-segment color="blue" inverted>Blue</sui-segment>
    <sui-segment color="violet" inverted>Violet</sui-segment>
    <sui-segment color="purple" inverted>Purple</sui-segment>
    <sui-segment color="pink" inverted>Pink</sui-segment>
    <sui-segment color="brown" inverted>Brown</sui-segment>
    <sui-segment color="grey" inverted>Grey</sui-segment>
    <sui-segment color="black" inverted>Black</sui-segment>
  </div>
</template>

<script>
export default {
  name: 'Color2Example',
};
</script>
